
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
        color: #dc143c;
            background: aquamarine;
            font-size: 32px;
        }
        .b{
            color: #e01735;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div>
    <h2 class="a">这里是页面图片</h2>
    <button class="b" onclick="doBuy()">买</button>
    <span id="result"></span>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //前端如何排错(日志,debugger,排除法)
    function doBuy(){
        console.log("==doBuy==");
        //1.基于axios框架发送异步ajax请求
        let url="http://localhost:9000/nacos/provider/echo/恭喜你购买成功"
        let span=document.getElementById("result");
        axios.get(url)
            .then(function (response) {//请求ok，执行then
                console.log(response.data);
                //2.将响应结果更新到页面上
                span.innerHTML = response.data
            })
            .catch(function (error) {
                console.log(error);
            });
    }
</script>
</body>
</html>
